<template>
  <div class="app-container">
    <div> vue2.0watch监听值得时候 新老值一样的解决方案  </div>
    <div> vue3.0watch监听值得时候 新老值一样的解决方案 和2.0一样都是深拷贝  </div>
    <div id="computed_props">
      <p @click="fun1" style="color: blue">方式一</p>
      <p @click="fun2" style="color: blue">方式二</p>
    </div>
  </div>
</template>

<script>
import Driver from "driver.js"; // import driver.js
import "driver.js/dist/driver.min.css"; // import driver.js css
import steps from "./steps";

export default {
  name: "Guide",
  data() {
    return {
      p: { a: 1 }
    };
  },
  mounted() {},
  computed: {
    pp() {
      return JSON.parse(JSON.stringify(this.p));
    }
  },
  watch: {
    // p: {
    //   handler(cval, oval) {
    //     console.log("--------");
    //     console.log(cval, oval);
    //   },
    //   deep: true
    // }
    pp: {
      handler(cval, oval) {
        console.log("--------");
        console.log(cval, oval);
      },
      deep: true
    }
  },
  methods: {
    fun1() {
      console.log("click 1111");
      this.p.a = 2; // 通过点方法赋值，发现观察不到p的变化
      //this.$set(this.p, 'b', 2) // 第一种解决方式，可以查看日志看到已经监听到了变化
    },
    fun2() {
      console.log("click 2222");
      // this.p.c = 20
      // this.$set(this.p, 'c', 20)
      this.p = Object.assign({}, this.p, { c: 3 });
    }
  }
};
</script>


<style lang="scss" scoped>
</style>
